@charset "UTF-8";
@import './mixins/_button.css';
@component-namespace t {
  @b button {
    position: relative;
    display: inline-block;
    @mixin button-size var(--button-normal-padding-vertical), var(--button-normal-padding-horizontal), var(--button-normal-font-size), var(--button-border-radius);
    line-height: 1;
    white-space: nowrap;
    &::-moz-focus-inner {
      border: 0;
    }
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    @utils-user-select none;
    appearance: none;
    color: var(--button-default-color);
    background: var(--button-default-fill);
    border: var(--button-default-border);
    border-radius: var(--button-border-radius);
    &:hover, &:focus {
      color: tint(var(--button-default-color), var(--button-hover-tint-percent));
      border-color: tint(var(--button-default-border-color), var(--button-hover-tint-percent));
    }
    &:active {
      color: shade(var(--button-default-color), var(--button-active-shade-percent));
      border-color: shade(var(--button-default-border-color), var(--button-active-shade-percent));
    }
    outline: none;
    & [class*="iconfont"] {
      & + span {
        margin-left: 0.15rem;
      }
    }
    & + & {
      margin-left: 0.25rem;
    }
    & + [class*="t-dropdown"] {
      margin-left: 0.25rem;
    }
    @m mini {
      @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
    }
    @m small {
      @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
    }
    @m normal {
      @mixin button-size var(--button-normal-padding-vertical), var(--button-normal-padding-horizontal), var(--button-normal-font-size), var(--button-border-radius);
    }
    @m large {
      @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
    }
    @m full {
      width: 100%;
      height: 100%;
      line-height: @height;
      font-size: var(--assist-font-size-small);
      border-radius: var(--border-radius-normal);
    }
    @m insert {
      @mixin button-variant var(--button-insert-color), var(--button-insert-fill), var(--button-insert-border);
    }
    @m todo {
      @mixin button-variant var(--button-update-color), var(--button-update-fill), var(--button-update-border);
    }
    @m done {
      @mixin button-variant var(--button-insert-color), var(--button-insert-fill), var(--button-insert-border);
    }
    @m delete {
      @mixin button-variant var(--button-delete-color), var(--button-delete-fill), var(--button-delete-border);
    }
    @m update {
      @mixin button-variant var(--button-update-color), var(--button-update-fill), var(--button-update-border);
    }
    @m primary {
      @mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border);
    }
    @m success {
      @mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border);
    }
    @m warning {
      @mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border);
    }
    @m danger {
      @mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border);
    }
    @m info {
      @mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
    }
    @when disabled {
      &, &:focus, &:hover {
        pointer-events: none;
        color: var(--button-disabled-color);
        border-color: var(--button-disabled-border);
        background-image: none;
        background-color: var(--button-disabled-fill);
      }
    }
    @when loading {
      pointer-events: none;
      &, &:focus, &:hover {
        color: var(--button-disabled-color);
        border-color: var(--button-disabled-border);
        background-image: none;
        background-color: var(--button-disabled-fill);
      }
    }
  }
}